<template>
	<el-autocomplete
		v-model="selectName"
		:size="size"
		:disabled="disabled"
		class="width-100-percent"
		:clearable="clearable"
		:highlight-first-item="true"
		:popper-append-to-body="popperAppendToBody"
		:hide-loading="true"
		:fetch-suggestions="fetchSuggestions"
		:placeholder="placeholder"
		@select="handleSelect"
		@blur="onBlur"
		@clear="onClear"
		@input="onChange"
	></el-autocomplete>
</template>

<script>
    export default {
        name: 'JkAutoComplete',
        props: {
            optionKey: { // 下拉选项唯一值的字段名
                type: String,
                default: 'id'
            },
            onlyKey: { // 外部与optionKey关联绑定的字段名
                type: String,
                default: 'id'
            },
            queryName: { // 搜索的字段
                type: String,
                default: 'name'
            },
            clearable: {
                type: Boolean,
                default: true
            },
            disabled: {
                type: Boolean,
                default: false
            },
            highlightFirstItem: {
                type: Boolean,
                default: true
            },
            popperAppendToBody: {
                type: Boolean,
                default: true
            },
            hideLoading: {
                type: Boolean,
                default: true
            },
            placeholder: {
                type: String,
                default: '物料名称'
            },
            paramsData: {
                type: Object,
                default() {
                    return {}; // 保存有onlyKey和queryName值的对象
                }
            },
            querySearchAsync: {
                type: Function,
                default() {
                    return () => {};
                }
            },
            size: {
                type: String,
                default: 'medium'
            }
        },
        data() {
            return {
                selectName: '',
                isCheck: true
            };
        },
        methods: {
            fetchSuggestions(queryString, cb) {
                this.querySearchAsync(queryString).then(arr => {
                    if (this.isCheck && this.paramsData[this.onlyKey]) arr = arr.filter(x => x[this.optionKey] === this.paramsData[this.onlyKey]);
                    cb(arr);
                });
            },
            onClear() {
                this.emitEvent();
            },
            emitEvent() {
                this.$emit('on-select', null);
            },
            handleSelect(item) {
                this.isCheck = true;
                this.$emit('on-select', item);
            },
            onBlur() {
                if (!this.isCheck) {
                    this.selectName = this.paramsData[this.queryName];
                }
            },
            onChange() {
                this.isCheck = false;
            }
        },
        watch: {
            paramsData: {
                handler(newVal) {
                    this.selectName = newVal[this.queryName];
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
